<template>
  <div style="width:80%;height:100%;position: absolute">
    <div id="mapView"></div>
  </div>

</template>

<script>
import esriLoader from 'esri-loader'
import { getOfficeInfoByCompanyCode } from '@/api/eventlist'

export default {
  name: 'index',
  data () {
    return {
      gridFid: '', // 社区FID
      communityName: '', // 社区名称
      searchInfo: {} // 搜索项
    }
  },
  methods: {
    _createSceneView: function () {
      let option = {
        // url: 'https://js.arcgis.com/4.16/',
        // css: 'https://js.arcgis.com/4.16/esri/themes/light/main.css'
        // url: 'http://10.40.20.35:38787/arcgis_js_api/library/4.13/dojo/dojo.js',
        // css: 'http://10.40.20.35:38787/arcgis_js_api/library/4.13/esri/themes/light/main.css'
        url: 'http://map.qstb.top/arcgis_js_api/library/4.16/dojo/dojo.js',
        css: 'http://map.qstb.top/arcgis_js_api/library/4.16/esri/themes/light/main.css'
      }
      esriLoader.loadModules(['esri/layers/MapImageLayer', 'esri/Map', 'esri/views/MapView', 'esri/Basemap', 'esri/PopupTemplate', 'esri/tasks/support/Query', 'esri/layers/FeatureLayer', 'esri/layers/GraphicsLayer', 'esri/symbols/SimpleMarkerSymbol', 'esri/renderers/SimpleRenderer', 'esri/symbols/SimpleLineSymbol', 'dojo/_base/Color', 'dojo/on',
        'dojo/dom', 'esri/layers/TileLayer', 'esri/widgets/Search', 'esri/geometry/Point'], option).then(([MapImageLayer, Map, MapView, Basemap, PopupTemplate, Query, FeatureLayer, GraphicsLayer, SimpleMarkerSymbol, SimpleRenderer, SimpleLineSymbol, Color, on, dom, TileLayer, Search, Point]) => {
        let syBaseMap = new Basemap({
          baseLayers: [
            new TileLayer({
              // url: 'http://218.25.87.120:6080/arcgis/rest/services/SYENEWMAP/MapServer?d=1597398611975',
              url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/syemap/MapServer',
              title: 'Basemap'
            })
          ],
          title: 'basemap',
          id: 'basemap'
          // zoom: 40
        })
        let map = new Map({
          basemap: syBaseMap,
          center: [-46.807, 32.553]
        })
        let view = new MapView({
          container: 'mapView', // Reference to the DOM node that will contain the view
          map: map, // References the map object created in step 3
          resizeEnable: true,
          autoResize: true,
          center: [41514920.799, 4662871.182],
          zoom: 2
          // highlightOptions: {
          //   color: [255, 255, 0, 1],
          //   haloOpacity: 0.9,
          //   fillOpacity: 0.2
          // }
        })
        console.log(this.gridFid, 'this.gridFid')
        let layer = new FeatureLayer({ // 社区名称
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/?id=1',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/1',
          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/1',
          // definitionExpression: 'FID = ' + this.gridFid + '',
          // definitionExpression: "街道名称 = '风雨坛街道'",
          // labelingInfo: [labelClass],
          popupTemplate: {
            title: '信息',
            content: [
              {
                type: 'fields',
                fieldInfos: [
                  {
                    fieldName: 'Id',
                    label: 'Id',
                    visible: true
                  },
                  {
                    fieldName: 'FID',
                    label: 'FID',
                    visible: true
                  },
                  {
                    fieldName: '行政区名称',
                    label: '行政区名称',
                    visible: true
                  },
                  {
                    fieldName: '街道名称',
                    label: '街道名称',
                    visible: true
                  },
                  {
                    fieldName: '社区名称',
                    label: '社区名称',
                    visible: true
                  },
                  {
                    fieldName: '网格编号',
                    label: '网格编号',
                    visible: true
                  },
                  {
                    fieldName: '面积',
                    label: '面积',
                    visible: true
                  }
                ]
              }
            ]
          },
          outFields: ['*']
        })
        map.add(layer, 2)
        let layer1 = new FeatureLayer({ // 网格
          id: 'aaa',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/0',
          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/2',
          // definitionExpression: 'FID in (308, 309, 310)',
          // definitionExpression: "街道名称 = '风雨坛街道'",
          // popupTemplate: {
          //   title: '信息',
          //   content: [
          //     {
          //       type: 'fields',
          //       fieldInfos: [
          //         {
          //           fieldName: 'Id',
          //           label: 'Id',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'FID',
          //           label: 'FID',
          //           visible: true
          //         },
          //         {
          //           fieldName: '行政区名称',
          //           label: '行政区名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '街道名称',
          //           label: '街道名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '社区名称',
          //           label: '社区名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '网格编号',
          //           label: '网格编号',
          //           visible: true
          //         },
          //         {
          //           fieldName: '面积',
          //           label: '面积',
          //           visible: true
          //         }
          //       ]
          //     }
          //   ]
          // },
          outFields: ['*']
        })
        map.add(layer1, 3)
        let layer2 = new FeatureLayer({ // 街道
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/?id=1',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/1',
          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/3',
          // definitionExpression: 'FID = ' + this.gridFid + '',
          // definitionExpression: "街道名称 = '风雨坛街道'",
          // labelingInfo: [labelClass],
          // popupTemplate: {
          //   title: '楼信息',
          //   content: [
          //     {
          //       type: 'fields',
          //       fieldInfos: [
          //         {
          //           fieldName: 'Id',
          //           label: 'Id',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'FID',
          //           label: 'FID',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'Shape',
          //           label: 'Shape',
          //           visible: true
          //         },
          //         {
          //           fieldName: '街道名称',
          //           label: '街道名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '社区名称',
          //           label: '社区名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '网格编号',
          //           label: '网格编号',
          //           visible: true
          //         }
          //       ]
          //     }
          //   ]
          // },
          outFields: ['*']
        })
        map.add(layer2, 1)
        let layer3 = new FeatureLayer({ // 区
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/?id=1',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/1',
          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/4',
          // definitionExpression: 'FID = ' + this.gridFid + '',
          // definitionExpression: "街道名称 = '风雨坛街道'",
          // labelingInfo: [labelClass],
          // popupTemplate: {
          //   title: '楼信息',
          //   content: [
          //     {
          //       type: 'fields',
          //       fieldInfos: [
          //         {
          //           fieldName: 'Id',
          //           label: 'Id',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'FID',
          //           label: 'FID',
          //           visible: true
          //         },
          //         {
          //           fieldName: 'Shape',
          //           label: 'Shape',
          //           visible: true
          //         },
          //         {
          //           fieldName: '街道名称',
          //           label: '街道名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '社区名称',
          //           label: '社区名称',
          //           visible: true
          //         },
          //         {
          //           fieldName: '网格编号',
          //           label: '网格编号',
          //           visible: true
          //         }
          //       ]
          //     }
          //   ]
          // },
          outFields: ['*']
        })
        map.add(layer3, 0)
        let layer4 = new FeatureLayer({ // 建筑点
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/?id=1',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/1',
          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/0',
          // definitionExpression: 'FID = ' + this.gridFid + '',
          // definitionExpression: "街道名称 = '风雨坛街道'",
          // labelingInfo: [labelClass],
          popupTemplate: {
            title: '楼信息',
            content: [
              {
                type: 'fields',
                fieldInfos: [
                  {
                    fieldName: 'Id',
                    label: 'Id',
                    visible: true
                  },
                  {
                    fieldName: 'FID',
                    label: 'FID',
                    visible: true
                  },
                  {
                    fieldName: 'ORIG_FID',
                    label: 'ORIG_FID',
                    visible: true
                  },
                  {
                    fieldName: 'bh',
                    label: 'bh',
                    visible: true
                  }
                ]
              }
            ]
          },
          outFields: ['*']
        })
        map.add(layer4, 5)
        let layer5 = new FeatureLayer({ // 建筑
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/?id=1',
          // url: 'http://218.25.87.120:6080/arcgis/rest/services/%E6%B2%88%E9%98%B3%E5%B8%82%E7%A9%BA%E9%97%B4%E5%9F%BA%E7%A1%80%E7%BD%91%E6%A0%BC/%E6%B2%88%E6%B2%B3%E5%8C%BA%E7%BD%91%E6%A0%BC/MapServer/1',
          url: 'http://qstb.mzj.shenyang.gov.cn/arcgis/rest/services/shenhequwangge/MapServer/5',
          // definitionExpression: 'FID = ' + this.gridFid + '',
          // definitionExpression: "街道名称 = '风雨坛街道'",
          // labelingInfo: [labelClass],
          popupTemplate: {
            title: '楼信息',
            content: [
              {
                type: 'fields',
                fieldInfos: [
                  {
                    fieldName: 'Id',
                    label: 'Id',
                    visible: true
                  },
                  {
                    fieldName: 'FID',
                    label: 'FID',
                    visible: true
                  },
                  {
                    fieldName: 'ORIG_FID',
                    label: 'ORIG_FID',
                    visible: true
                  },
                  {
                    fieldName: 'bh',
                    label: 'bh',
                    visible: true
                  }
                ]
              }
            ]
          },
          outFields: ['*']
        })
        map.add(layer5, 4)
        // layer.load().then(function () { // 图层加载事件
        //   console.log('@@@@')
        //   // Set the view extent to the data extent
        //   // view.extent = layer.fullExtent
        //   // layer.popupTemplate = layer.createPopupTemplate()
        // })
        // let query = layer.createQuery() // 查询图层信息
        // layer.queryFeatures(query).then(function (response) {
        //   console.log('!!!!')
        //   console.log(response)
        // })
        // var template = {
        //   // autocasts as new PopupTemplate()
        //   title: '111',
        //   content: [
        //     {
        //       type: "fields",
        //       fieldInfos: [
        //         {
        //           fieldName: "B12001_calc_pctMarriedE", // The field whose values you want to format
        //           label: "Married %"
        //         },
        //       ]
        //     }
        //   ]
        // }
        view.on('click', (evt) => {
          console.log(evt, 'evt')
          view.hitTest(evt).then(function (response) {
            console.log(response, 'response')
            if (response.results.length) {
              var graphic = response.results.filter(function (result) {
                return result.graphic.layer === layer
              })[0].graphic
              // layer.popupTemplate = template
              var graphic1 = response.results.filter(function (result) {
                return result.graphic.layer === layer1
              })[0].graphic
              var graphic2 = response.results.filter(function (result) {
                return result.graphic.layer === layer2
              })[0].graphic
              // var popupTemplate = {
              //   title: '11',
              //   content: '111'
              // }
              // layer.popupTemplate = popupTemplate
              // do something with the result graphic
              console.log('街道信息', graphic2.attributes)
              console.log('社区信息', graphic.attributes)
              console.log('网格信息', graphic1.attributes)
            }
          })
        })
        var searchWidget = new Search({
          view: view,
          includeDefaultSources: function (sourcesResponse) {
            return sourcesResponse.sources
          },
          allPlaceholder: '输入需要查询的街道/社区名称',
          searchAllEnabled: true, // 是否开启查找所有
          popupEnabled: true, // 是否弹出窗口
          resultGraphicEnabled: true,
          sources: [{
            layer: layer2,
            autoNavigate: true, // 是否自动导航到选定结果
            searchFields: ['街道名称'],
            displayField: '街道名称',
            exactMatch: false, // 表示是否进行完全匹配
            outFields: ['*'],
            name: '街道名称',
            placeholder: '铝镁社区',
            maxSuggestions: 10, // 最大建议数量
            suggestionTemplate: '社区编号: {FID}, 社区名称: {社区名称}'
          },
          {
            layer: layer,
            autoNavigate: true, // 是否自动导航到选定结果
            searchFields: ['社区名称'],
            displayField: '社区名称',
            exactMatch: false, // 表示是否进行完全匹配
            outFields: ['*'],
            name: '铝镁社区',
            placeholder: '铝镁社区',
            maxSuggestions: 10, // 最大建议数量
            suggestionTemplate: '社区编号: {FID}, 社区名称: {社区名称}'
          }]
        })
        // Adds the search widget below other elements in
        // the top left corner of the view
        view.ui.add(searchWidget, {
          position: 'top-right',
          index: 2
        })
        // Use the `search-start` event of the SearchViewModel
        searchWidget.viewModel.on('search-start', function (event) {
          console.log(event)
          console.log("SearchViewModel says: 'Search started'.")
        })
        // var highlight
        // view.whenLayerView(layer).then(function (layerView) { // 查询后设置高亮
        //   var query = layer.createQuery()
        //   query.where = 'FID = ' + this.gridFid + ''
        //   console.log(query.where, 'query.where')
        //   layer.queryFeatures(query).then(function (result) {
        //     if (highlight) {
        //       highlight.remove()
        //     }
        //     highlight = layerView.highlight(result.features)
        //   })
        // })
        // view.on('pointer-move', function (event) { // 鼠标移动点亮设置
        //   view.hitTest(event).then(function (response) {
        //     if (response.results.length) {
        //       var graphic = response.results.filter(function (result) {
        //         return result.graphic.layer === layer
        //       })[0].graphic
        //       console.log(graphic, '!!!')
        //       view.whenLayerView(graphic.layer).then(function (layerView) {
        //         layerView.highlight(graphic)
        //       })
        //     }
        //   })
        // })
      })
    },
    show () {
    },
    findGridInfo () {
      getOfficeInfoByCompanyCode().then(ret => {
        if (ret.data.errcode === 0) {
          this.gridFid = ret.data.data.csc_map_fid
          console.log(ret.data.data, '社区信息')
          this._createSceneView()
        }
      })
    }
    // searchName () {
    //   console.log(this.searchInfo)
    //   this.gridFid = this.searchInfo.title
    // }
  },
  mounted () {
    this.findGridInfo()
    // this._createSceneView()
  }
}
</script>

<style scoped>
  #mapView{
    position: absolute;
    width: 100%;
    height: 65%;
    /* width: 1024px;
    height: 768px; */
  }
  .search-div {
    width: 250px;
    margin-left: 55px;
    margin-top: 16px;
  }
</style>
